<template>
    <div class="mainContainer">
        <el-container class="mainContainer">
            <el-header style="padding: 0">
                <el-menu
                        :default-active="1"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <div style="flex-grow: 1"/>
                    <el-menu-item style="margin-left: 100px;font-family: 华文行楷;font-size: 24px">OA办公系统</el-menu-item>
                    <el-menu-item style="margin-left: 65%;">
                        <el-dropdown @command="clickEvent" trigger="click" placement="bottom" >
                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                            <el-dropdown-menu slot="dropdown" style="text-align: center">
                                <el-dropdown-item command="1">个人信息</el-dropdown-item>
                                <el-dropdown-item command="2">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <span style="margin-left: 20px;font-family: 华文行楷;font-size: 24px">{{name}}</span></el-menu-item>
                </el-menu>
            </el-header>
            <el-container style="height: 100%;">
                <el-aside width="200px" class="heighAll">
                    <!--    侧边栏-->
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b" router>

                        <el-submenu v-for="(item,index) in module" :index="(index+1)" style="text-align: left">
                            <template slot="title">
                                <span><i :class="item[0].icon"></i>{{ item[0].moduleName }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item v-for="index2 in item.length-1" :index="(index+1)+'.'+index2"
                                              route="/onlineInfo/message"><i
                                        :class="item[index2].icon"></i>{{ item[index2].moduleName }}
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import axios from "@/api/request";

    export default {
        name: "Home",
        data() {
            return {
                module: {},
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                name: localStorage.getItem("staffName")
            }
        },
        created() {
            axios({
                url: "/system/permission/module",
                params: {id: localStorage.getItem("staffId")}
            }).then(res => {
                this.module = res
                console.log(res)
            })
        },
        methods:{
            clickEvent(comment){
                //退出登录
                if (comment === '2') {
                    axios({
                        url: "/system/permission/loginOut",
                        params: {id: localStorage.getItem("staffId")}
                    }).then(res => {
                        this.$message({
                            type: 'info',
                            message: res.message
                        });
                        localStorage.removeItem("staffId")
                        localStorage.removeItem("staffName")
                        localStorage.removeItem("token")
                        this.$router.push("/login")
                    })
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .mainContainer {
        position: fixed;
        height: 100%;
        width: 100%;

        .heighAll {
            height: 100%;
            width: 200px;
        }

    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        height: 100%;
    }
</style>